import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css'
import { Col, Flex, Layout, Row,Image } from 'antd'
const { Header, Footer, Content } = Layout;

const headerStyle = {
  //textAlign: 'center',
  color: '#222',
  height: 64,
  //paddingInline: 48,
  padding: '0 24px',
  lineHeight: '64px',
  backgroundColor: '#eee',
};

const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#0958d9',
};

const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#4096ff',
};
function App() {
  const [count, setCount] = useState(0)
  return (
    <>
      <Layout>
        <Header style={headerStyle}>
          <Row>
            <Col span={16}>
              
              <Flex justify='flex-start' align='center'>
                <Image width={32} src={'assets/icon/logo64.png'}></Image>
                <span style={{ marginLeft: 8 , fontSize: 18,fontWeight: 'bold'}}>
                  素材下载器
                </span>
                
              </Flex>
            </Col>
            <Col span={8}>
              <Flex justify="flex-end" align='center'>尾巴</Flex>
            </Col>
          </Row>
        </Header>
        <Content style={contentStyle}>
          <div>素材下载器</div>
          <div>{count}</div>
          <button onClick={() => setCount((count) => count + 1)}>+1</button>
        </Content>
        <Footer style={footerStyle}>Footer</Footer>
      </Layout>

    </>
  )
}

export default App
